<template>
	<avue-form class="user-info" ref="form" v-model="form" :option="option" @reset-change="emptytChange" @submit="submit">
	</avue-form>
</template>

<script>
import {updatePassword} from "@/api/base";

export default {
	name: "userPassword",
	data() {
		const regPass = new RegExp(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/);
		const validatePass = (rule, value, callback) => {
			if (value === '') {
				return callback(new Error('密码不能为空'));
			}
			// var reg = new RegExp(/^[a-zA-Z0-9]{8,20}$/);
			if (regPass.test(value)) {
				callback();
			} else {
				return callback(new Error('密码规则为8到20位字母与数字组合'));
			}
		};
		const validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.newpassword) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			form: {},
			option: {
				submitText: '修改',
				column: [
					{
						label: '原密码',
						span: 8,
						row: true,
						type: 'password',
						rules: [{
							required: true,
							message: "请输入原密码",
							trigger: "blur"
						}],
						prop: 'oldpassword'
					},
					{
						label: '新密码',
						span: 12,
						row: true,
						type: 'password',
						rules: [
							{required: true, validator: validatePass, trigger: "blur"},
						],
						prop: 'newpassword'
					},
					{
						label: '确认密码',
						span: 12,
						row: true,
						type: 'password',
						rules: [
							{required: true, validator: validatePass2, trigger: "blur"},
						],
						prop: 'newpasswords'
					}
				]
			}
		};
	},
	methods: {
		submit(form, done) {
			updatePassword(this.form.oldpassword, this.form.newpassword).then(res => {
				done();
				if (res.data.success) {
					this.$message({type: "success", message: "操作成功!"});
				} else {
					this.$message({type: "error", message: res.data.msg});
				}
			}, error => {
				done();
				console.log(error);
			});
		},
		emptytChange() {
			this.form = {}
		}
	}
};
</script>
<style lang="scss">
.user-info {
	padding-top: 2vh;

	.el-collapse-item__wrap {
		background-color: transparent;
		border-color: transparent;
		border-bottom: 1px solid transparent;
	}

	.avue-group .el-collapse, .avue-group .el-collapse-item__wrap {
		border-color: transparent;
	}

	.el-form-item__label {
		color: #ffffff;
	}

	.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
		margin-bottom: 2.78vh;
	}

	.el-input__inner {
		background-color: transparent;
		border-color: #3f83d5;
		color: #fff;
	}
}
</style>

